<template>
  <view class="classify">
    <MyHeader title="分类"></MyHeader>

    <view class="main">
      <view class="content">
        <MyCardItem v-for="(item,index) in subjectItems" :key="index" :content="item" class="item"></MyCardItem>
      </view>
	  
	  <view class="load-more">
	    <uni-load-more :status="status"></uni-load-more>
	  </view>
    </view>
  </view>
</template>

<script setup>
import { request } from '../../utils';
  const subjectItems = ref([])
  const status = ref('more')
  
  const searchForm = reactive({
	  page:1,
	  pageSize:16
  })
  
  
  const getClassifyList = ()=>{
	  status.value = 'loading'
	  return request({
		  url:'https://tea.qingnian8.com/api/bizhi/classify',
		  data:{
			  pageNum:searchForm.page,
			  pageSize:searchForm.pageSize
		  }
	  }).then(res=>{
		  console.log(res);
		  if(res.data.length===0) {
			  status.value = 'no-more'
			  return 
		  } 
		  searchForm.page++
		  subjectItems.value.push(...res.data.map(item=>({
			  typeId:item._id,
			  type: item.name,
			  image:item.picurl,
			  updateTime: item.updateTime,
			  ...item,
		  })))
		  status.value = 'more'
	  })
  }
  
  
  onPullDownRefresh(()=>{
	  searchForm.page = 1
	  subjectItems.value = []
	  getClassifyList().finally(()=>{
		  uni.stopPullDownRefresh()
	  })
  })
  
  
  onReachBottom(() => {
    getClassifyList()
  })
  
  onLoad(()=>{
	  getClassifyList()
  })
</script>

<style lang="scss" scoped>
  .classify {
    .main {
      margin-top: -120rpx;
      padding: 20rpx;
	  .load-more {
	    padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
	  }
    }

    .content {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-row-gap: 10rpx;
	 
    }
  }
</style>